<script setup>
import {reactive, ref} from "vue";
import {GET, POST, PUT} from "../../../api/index.js";

const dialogFormVisible = ref(false)
const emit = defineEmits(['ok'])
const form = reactive({
  id: '',
  recordDate: '',
  commission: 0,
  amount: 0,
  type: 1
})

const open = (row) => {
  if(row?.id) {
    form.id = row.id
    form.recordDate = row.recordDate
    form.commission = row.commission
    form.amount = row.amount
    form.type = row.type
  }

  dialogFormVisible.value = true
}

const saveHandle = () => {
  if(form.id) {
    PUT('/market/transactionRecord', form).then(res => {
      dialogFormVisible.value = false
      emit('ok')
    })
  } else {
    POST('/market/transactionRecord', form).then(res => {
      dialogFormVisible.value = false
      emit('ok')
    })
  }

}

defineExpose({
  open
})
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="编辑" width="800">
    <el-form :model="form" label-width="100">
      <el-form-item label="交易日期">
        <el-date-picker
            v-model="form.recordDate"
            type="datetime"
            placeholder="Pick a day"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="手续费">
        <el-input-number v-model="form.commission"/>
      </el-form-item>
      <el-form-item label="盈亏">
        <el-radio-group v-model="form.type">
          <el-radio :value="1">盈利</el-radio>
          <el-radio :value="2">亏损</el-radio>
          <el-radio :value="3">无成交</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="交易金额">
        <el-input-number v-model="form.amount"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveHandle">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>